<template>
  <!-- <div class="listTemplate"> -->
  <mu-paper :z-depth="1" class="lan-loadmore-body">
    <mu-appbar color="primary" class="lan-header" :class="!$route.query.type?'sceipH':''">
      <mu-button icon slot="left" v-close v-if="!$route.query.type">
        <i class="iconfont angle-left iconangle-left"></i>
        <span class="lan-header-back">返回</span>
      </mu-button>
      <mu-button icon slot="left" v-close v-else>
        <!-- <i class="iconfont angle-left iconangle-left"></i> -->
      </mu-button>
      整改通知单
      <div slot="right" >
        <!-- <mu-button icon  class="no-lr-p" v-if="!$route.query.type">
          <i class="iconfont iconxiazai primaryColor" ></i>
        </mu-button> -->
        <mu-button icon @click="shareThis" class="no-lr-p" v-if="!$route.query.type && iswx">
          <i class="iconfont iconfenxiang primaryColor"></i>
        </mu-button>
         <mu-button icon @click="shareThis" v-if="$route.query.type && !iswx">
          
        </mu-button>
      </div>
    </mu-appbar>
    <section class="t-body lan-loadmore-content bg-normal">
      <section class="box">
        <div class="box-body">
          <section class="table">
            <div class="tr ">
              <div class="td " style="width:0.6rem;line-height:0.3rem;">
                <img src="../../../assets/img/logo.jpg" style="height:0.6rem;" >
              </div>
              <div class="td" style="width:calc(100% - 0.6rem);line-height:0.34rem;padding:0;">
                <div class="tr " style="border-left:none;justify-content: center;font-weight:600;font-size: 0.14rem">中国建筑  项目管理表格</div>
                <div class="tr ">
                  <div class="td" style="line-height:0.25rem;min-height:0.2rem;text-align: center;width:calc(100% - 1.35rem);">整改通知单</div>
                  <div class="td" style="width:1.35rem;padding:0;min-height:auto;line-height:0.2rem;">
                    <div class="tr " style="line-height:0.17rem;justify-content: center;border-left:0;">表格编号</div>
                    <div class="tr " style="line-height:0.17rem;justify-content: center;">CSCEC8B-EQ-B31001</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tr">
              <div class="td title" style="width: 30%;min-height:0.2rem;line-height:0.2rem;">工程名称及编码</div>
              <div class="td" style="width:70%;line-height:0.2rem;">
                {{detail.orgName || ''}}({{detail.projectCode || ''}})
              </div>
            </div>
            <div class="tr">
              <div class="td title" style="width: 30%;min-height:0.2rem;line-height:0.2rem;">项目基本情况</div>
              <div class="td" style="width:70%;line-height:0.2rem;"></div>
            </div>
            <div class="tr ">
              <div class="td title">接收单位</div>
              <div class="td text">{{detail.responsibleUnitName || ''}}</div>
              <div class="td title">接收人</div>
              <div class="td">{{detail.responsibleUserName || ''}}</div>
            </div>
            <div class="tr" style="border-bottom:0;">
              <div class="td title" style="min-height:0.2rem;line-height:0.2rem;justify-content: flex-start;padding-left:0.1rem;">整改内容:</div>
              <div class="td" style="width:75%;line-height:0.2rem;border-left:0;min-height:0.2rem;"></div>
            </div>
            <div class="tr" style="padding:0 0.1rem;min-height: 1rem;border-bottom:0;">
              {{detail.rectRequirements || ''}}
            </div>
            <div class="tr">
              <div class="td title" style="min-height:0.2rem;line-height:0.2rem;justify-content: flex-start;padding-left:0.1rem;"></div>
              <div class="td" style="width:75%;line-height:0.2rem;border-left:0;min-height:0.2rem;">
                检查人:{{detail.checkUserName || ''}} <span style="width:0.5rem;display:inline-block;"></span> {{ht(detail.checkTime)}}
              </div>
            </div>
             <div class="tr ">
              <div class="td title">完成期限</div>
              <div class="td " style="width:30%;">{{ht(detail.endTime)}}</div>
              <div class="td title">指定验证人</div>
              <div class="td">{{detail.reviewUserName || ''}}</div>
            </div>
            <div class="tr" style="border-bottom:0;">
              <div class="td title" style="width:40%;min-height:0.2rem;line-height:0.2rem;justify-content: flex-start;padding-left:0.1rem;">处理情况和自检结果:</div>
              <div class="td" style="width:60%;line-height:0.2rem;border-left:0;min-height:0.2rem;"></div>
            </div>
            <div class="tr" style="padding:0 0.1rem;min-height: 1rem;border-bottom:0;">
              {{rectifyDto.rectDesc}}
            </div>
            <div class="tr">
              <div class="td title" style="min-height:0.2rem;line-height:0.2rem;justify-content: flex-start;padding-left:0.1rem;"></div>
              <div class="td" style="width:75%;line-height:0.2rem;border-left:0;min-height:0.2rem;">
                自检人:{{detail.responsibleUserName || ''}} <span style="width:0.5rem;display:inline-block;"></span> {{ht(rectifyDto.rectTime)}}
              </div>
            </div>
            <div class="tr" style="border-bottom:0;">
              <div class="td title" style="min-height:0.2rem;line-height:0.2rem;justify-content: flex-start;padding-left:0.1rem;">验收记录:</div>
              <div class="td" style="width:75%;line-height:0.2rem;border-left:0;min-height:0.2rem;"></div>
            </div>
            <div class="tr" style="padding:0 0.1rem;min-height: 1rem;border-bottom:0;">
              {{reviewDto.reviewDesc}}
            </div>
            <div class="tr">
              <div class="td title" style="min-height:0.2rem;line-height:0.2rem;justify-content: flex-start;padding-left:0.1rem;"></div>
              <div class="td" style="width:75%;line-height:0.2rem;border-left:0;min-height:0.2rem;">
                验证人:{{reviewDto.reviewUserName || ''}} <span style="width:0.5rem;display:inline-block;"></span> {{ht(reviewDto.reviewTime)}}
              </div>
            </div>
          </section>
          <div style="font-size:0.1rem;color:#333;padding:0.05rem 0.1rem;">注：本表一式二联。交被通知单位一联，下达人留存一联；整改完成并填写“处理情况和自检结果”后。整改单位一联返回下达人。</div>
        </div>
      </section>
      <div class="tcode areaCode" button v-if="!$route.query.type">
        <QRcode ref="code1" :width="'150'" :height="'150'" :content="$A.Url[0]+'/Totips?problemId='+detail.problemId+'&type=1'" ></QRcode>
        <div>长按图片保存分享</div>
      </div>
      
    </section>
    <mt-actionsheet :actions="actions" v-model="openSave"></mt-actionsheet>
    <!-- <mu-bottom-sheet :open.sync="openSave">
      <mu-list >
        <mu-list-item button @click="load2code" >
          <div style="text-align: center;">保存为图片</div>
        </mu-list-item>
        <mu-list-item button @click="openSave = false" tyle="text-align: center;">
          取消
        </mu-list-item>
      </mu-list>
    </mu-bottom-sheet> -->
  </mu-paper>
</template>

<script>
export default {
  name: 'mainPage',
  data () {
    return {
      id: '',
      detail:{},
      rectifyDto: {},
      reviewDto:{},
      openSave:false,
       actions: [
        {
          name: "保存为图片",
          method: this.load2code
        },
      ],
      iswx:''
    }
  },
  // props: {
  //   problemId: {
  //     type: String,
  //     default: ()=>''
  //   }
  // },
  mounted () {

  },
  created () {
    this.id = this.$route.query.problemId
    this.id && this.getDetail()
    this.$nextTick(o=>{
      this.initSave()
    })
    let iswx = sessionStorage.getItem("wx")
  },
  methods: {
    ht(str){
      if(!str){
        return '   年   月   日'
      }
      return str.substr(0,10).replace('-','年').replace('-','月') + '日'
    },
    getDetail () {
      this.$openLoading();
      this.$A.Go('GET','/safety/checkProblem/detail',{problemId: this.id}).then(success=>{
          if(success.code == 200){
            this.detail = success.body;
            if(this.detail.rectAndReviewList && this.detail.rectAndReviewList[0]){
              if(this.detail.rectAndReviewList[0]['rectDetailVo']){
                this.rectifyDto = this.detail.rectAndReviewList[0]['rectDetailVo']
              }
              if(this.detail.rectAndReviewList[0]['reviewDetailVo']){
                this.reviewDto = this.detail.rectAndReviewList[0]['reviewDetailVo']
              }
            }
          } else {
            this.$A.MS(success.msg)
          }

          this.$closeLoading();
        },
        err=>{
          console.warn(err);
          this.$closeLoading();
        }
      );
    },
    //下载二维码
    load2code(){
      this.$refs.code1.loadCode()
    },
    //长按保存
    initSave(){
      let self = this;
      let longClick =0;
      let timeOutEvent = null;
      $(".areaCode").on({
          touchstart: function(e){
              longClick=0;//设置初始为0
              timeOutEvent = setTimeout(function(){
                longClick=1;//假如长按，则设置为1
                self.openSave = true
              },1000);
          },
          touchmove: function(){
              clearTimeout(timeOutEvent);
              timeOutEvent = 0;
              e.preventDefault();
          },
          touchend: function(e){
              clearTimeout(timeOutEvent);
              // if(timeOutEvent!=0 && longClick==0){//点击
              //     //此处为点击事件----在此处添加跳转详情页
              // }else{//长按
              // }
              return false;
          }
      });
    },
    //分享
    shareThis(){
      wx.invoke(
        "shareWechatMessage", {
                title: this.detail.orgName+'（整改通知单）', // 分享标题
                desc: this.detail.rectRequirements+'', // 分享描述
                link: this.$A.Url[0]+'/Totips?problemId='+this.detail.problemId+'&type=1', // 分享链接
                imgUrl: 'http://autobuild.jiguantong.com:8087/safety/system/download?fileUrl=2020-01-06/logo.jpg' // 分享封面
          }, function(res) {
              if (res.err_msg == "shareAppMessage:ok") {
                // alert('分享成功')
              }
          }
      );

    },
  }
}
</script>
<style lang="scss" scoped>
  .tcode{
    width:150px;
    margin: 0 auto;
    margin-top:0.2rem;
    box-shadow: 0px 2px 8px 0px rgba(182, 182, 181, 0.4);
    text-align: center;
  }
    .t-header {
      height: 0.45rem;
      width: 100%;
      color: #3D3D3D;
      box-sizing: border-box;
      padding: 5px 8px;
      position: relative;
      // box-shadow: 0 2px 4px -1px rgba(0,0,0,.07), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 7px 0 rgba(0,0,0,.12);
      -border-bottom: 1px solid #dedede;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .t-close {
        min-width: 28px;
        border-radius: 50%;
      }

      .t-title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 0.19rem;
        font-weight: 500;
      }

      .t-right-icon {
        font-size: 0.2rem;
      }
    }

    .t-body {
      height: calc(100% - 0.45rem);
      width: 100%;
      overflow: auto;
      background-color: #F8F8F8;
      padding: 10px;
    }

    .t-body+.t-footer {
      height: 0.45rem;
      width: 100%;
    }

    .t-footer+.t-body {
      height: calc(100% - 0.9rem);
    }

    // 自定义样式
    .box {
      // padding: 10px 15px;
      background:rgba(255,255,255,1);
      box-shadow:0px 2px 8px 0px rgba(182,182,181,0.4);
      .box-header{
        padding:0.1rem 0.15rem;
        border-bottom: 1px dashed #E0E0E0;
      }
      .box-body{
        padding:0;
      }
    }

    .line-list {
      margin: 15px 0;
      font-size: 0.15rem;
    }

    .textdot {
      display: block;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .table {
      width: 100%;
      height: auto;
      border: 1px solid rgba(224,224,224,1);
      font-size: 0.12rem;
      line-height: 0.2rem;
      background-color: #fff;
      font-size:0.11rem;
      .tr {
        width: 100%;
        border-bottom: 1px solid rgba(224,224,224,1);
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        font-size:0.11rem;
        .td {
          border-left: 1px solid rgba(224,224,224,1);
          width: 25%;
          text-align: center;
          min-height: 0.4rem;
          line-height: 0.4rem;
          padding: 0.05rem 0.03rem;
          font-size:0.11rem;
          >.tr:last-child {
            border: none;
          }
        }

        >.td:first-child {
          border: none;
        }

        .tr {
          border-left: 1px solid rgba(224,224,224,1);
        }
      }

      >.tr:last-child {
        border: none;
      }

      .header {
        -background-color: #ddd;
        color: #000;
      }

      .subheader {
        -background-color: #eee;
        color: #333;
      }
    }
    .tiptitle{
      text-align:center;
      font-size:0.15rem;
    }
    .td.title{
      color:#3D3D3D;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .td.text{
      color:#3D3D3D;
      line-height:0.2rem !important;
    }
  .img-line{
    padding:0.1rem 0.15rem;
    border-top: 1px dashed #E0E0E0;
  }
  .img-box{
    width:100%;
    img{
      height:0.75rem;
      width:0.75rem;
      margin:0.1rem;
    }
  }
  .width-4{
    width:25%;
  }
</style>
<style lang="scss">
.sceipH.mu-appbar{
  justify-content: space-between;
  .mu-appbar-title{
    width:calc(100% - 160px);
  }
  .mu-appbar-left{
    -margin-right:30px;
  }
  .mu-icon-button{
    width:38px;
  }
}
.no-lr-p{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
  .t-close {
    .mu-button-wrapper {
      padding: 0 !important;
    }
  }

  .td {
    .mu-checkbox-svg-icon {
      height: 20px;
      width: 20px;
    }

    .mu-checkbox {
      line-height: 20px;
      height: 20px;
    }
  }
</style>
